<template>
  <base-layout>
    <template #searchPanel>
      <el-row :gutter="20">
        <search-panel
          v-slot="{ form }"
          @search="search"
          :showAddButton="false"
          :addPer="'111'"
          :selectPer="'111'"
        >
          <el-select
            clearable
            placeholder="请选择品牌"
            style="width: 150px"
            v-model="form.brandId"
            @change="getCarSeries"
            @clear="clearCarModelSelectOptions(1)"
          >
            <el-option
              v-for="item in carBrandOptions"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
          <el-select
            clearable
            style="width: 150px"
            placeholder="请选择车系"
            v-model="form.seriesId"
            @change="getTimeType"
            @clear="clearCarModelSelectOptions(2)"
          >
            <el-option
              v-for="item in carSeriesOptions"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
          <el-select
            clearable
            placeholder="请选择年款"
            ref="dragSelect"
            style="width: 150px"
            v-model="form.timeType"
            class="drag-select"
            @change="getCarModel"
            @clear="clearCarModelSelectOptions(3)"
          >
            <el-option
              v-for="item in timeTypesOptions"
              :key="item"
              :value="item"
              :label="item"
            />
          </el-select>

          <el-select
            clearable
            placeholder="请选择车型"
            style="width: 150px"
            v-model="form.modelName"
          >
            <el-option
              v-for="item in carModelOptions"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
          <el-date-picker
            v-model="form.timeList"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <job-shop
            v-model="form.storeId"
            placeholder="适用门店"
            size="small"
            style=""
          />
        </search-panel>
      </el-row>
    </template>
    <template #contentPanel>
      <data-table
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        :width="160"
        :isShowPage="false"
      >
      </data-table>
    </template>
  </base-layout>
</template>

<script>
import baseMixin from '@/mixins/base'
import { getDict } from '@/utils/index'
import {
  getAllBrand,
  getSeries,
  getModelTimeType,
  getModelRank,
  dataList,
} from '@/api/pre-sale/newCarStock/storeCarStatistics'
// import { rulesForm } from './rules'
export default {
  mixins: [
    baseMixin({
      idName: 'id',
      dataName: ['content', 'totalRecords'],
    }),
  ],
  data() {
    return {
      form: {
        brandId: '', //品牌
        seriesId: '', // 车系
        timeType: '', // 年款
        modelName: '', // 车型
        timeList: [],
        storeId: '',
      },
      carBrandOptions: [], // 品牌
      carSeriesOptions: [], // 车系
      timeTypesOptions: [], // 年款
      carModelOptions: [], // 车型
      rule: {},
      getDict: getDict(['状态']),
      tableColumnAttributes: [
        { name: '所属门店', value: 'num', type: 'text', width: '200' },
        { name: '时间', value: 'shop', type: 'text', width: '200' },
        {
          name: '品牌/车系/车型',
          value: 'modelName',
          type: 'text',
          width: '200',
        },
        { name: '来源类型', value: 'title', type: 'text', width: '200' },
        { name: '数量', value: 'remark', type: 'text', width: '200' },
      ],
      tableData: [{ id: 1 }],
    }
  },
  methods: {
    search() {
      this.searchOptions = this.form
      this.currentPage = 1
      this.setTableData()
    },
    // 查询车系
    getCarSeries(value) {
      getSeries(value).then((res) => {
        let { data, success } = res
        this.carSeriesOptions = data
      })
    },
    // 查询年款
    getTimeType() {
      if (!this.form.brandId || !this.form.seriesId) return
      getModelTimeType(this.form.brandId, this.form.seriesId).then((res) => {
        let { data, success } = res
        this.timeTypesOptions = success ? res.data : []
      })
    },
    // 查询车型
    getCarModel() {
      if (!this.form.brandId || !this.form.seriesId || !this.form.timeType)
        return
      getModelRank(
        this.form.brandId,
        this.form.seriesId,
        this.form.timeType
      ).then((res) => {
        let { data, success } = res
        this.carModelOptions = data
      })
    },
    // 清空查询
    clearCarModelSelectOptions(num) {
      if (num == 1) {
        this.carSeriesOptions = []
        this.timeTypesOptions = []
        this.carModelOptions = []
        this.form.timeType = ''
        this.form.seriesId = ''
        this.form.modelName = ''
      } else if (num == 2) {
        this.timeTypesOptions = []
        this.carModelOptions = []
        this.form.timeType = ''
        this.form.modelName = ''
      } else if (num == 3) {
        this.carModelOptions = []
        this.form.modelName = ''
      }
    },
  },
  created() {
    // 查询品牌
    getAllBrand().then((res) => {
      let { data, success } = res
      this.carBrandOptions = data
    })
  },
}
</script>

<style lang="scss" scoped>
</style>